<template>
    <div style="min-width: 829px">
        <div v-if="$route.path == '/freeofcharge'">
            <div class="vs-search-box">
                <el-form
                    ref="form"
                    :inline="true"
                    :model="paging"
                    label-width="90px"
                >
                    <el-form-item label="门店:">
                        <el-select
                        v-model="paging.store_id"
                        placeholder="请选择"
                        style="width: 200px"
                        >
                            <el-option
                                v-for="item in storeList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="GetList(1)" type="primary" >查询</el-button >
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input
                            style="width: 200px"
                            v-model="paging.name"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input
                            style="width: 200px"
                            v-model="paging.phone"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button
                        icon="el-icon-plus"
                        @click="dialogVisible=true"
                        style="margin-left: auto"
                        type="primary"
                    >
                        新增
                    </el-button>
                </div>
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    header-row-class-name="has-gutter-table"
                    style="width: 100%"
                >
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="store.title" label="所属门店"> </el-table-column>
                    <el-table-column prop="name" label="姓名"> </el-table-column>
                    <el-table-column prop="phone" label="电话"> </el-table-column>
                    <el-table-column fixed="right" width="109" label="操作">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text" >编辑</span >
                            <span @click="setRow(2, scope.row)" class="tab-red-text" >删除</span >
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <div class="vs-paging-box">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="paging.page"
                        :page-size="paging.limit"
                        layout="prev, pager, next, jumper"
                        :total="paging.total"
                    >
                    </el-pagination>
                </div> -->
            </div>
        </div>
        <el-dialog
        :title="form.id?'修改免单人':'添加免单人'"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="110px">
                <el-form-item prop="store_id" label="门店">
                    <el-select
                        v-model="form.store_id"
                        placeholder="请选择门店"
                        >
                        <el-option
                            v-for="item in storeList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="name" label="姓名">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item prop="phone" label="电话">
                    <el-input v-model="form.phone" maxlength="11" placeholder="请输入电话"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="setStoreFree">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { number } from 'echarts';
export default {
    data() {
        return {
            loading: false,
            dialogVisible:false,
            storeList:[],
            form:{
                name:'',
                phone:'',
                store_id:'',
            },
            rules:{
                name:{ required: true, message: '姓名不能为空!', trigger: 'blur' },
                phone:{ required: true, message: '电话不能为空!', trigger: 'blur' },
                store_id:{ required: true, message: '门店不能为空!', trigger: 'change' },
            },
            paging: {
                store_id: "",
                page: 1,
                limit: 10,
                total: 0, //总数
            },
            tableData: [],
        };
    },
    created() {
        let {id} = this.$route.query;
        this.paging.store_id = Number(id);
        this.form.store_id = Number(id);
        this.GetList();
        this.homegetStore();
    },
    methods: {
        // 获取全部门店
        async homegetStore() {
            let { code, data } = await this.$Http.homegetStore();
            this.storeList = data;
        },
        handleClose(dom){
            this.dialogVisible = false;
            this.$refs['form'].resetFields();
            this.form = this.$options.data().form;
            this.form.store_id = this.paging.store_id;
            dom&&dom();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.GetList();
        },
        setStoreFree(){
            this.$refs['form'].validate(async (valid) => {
                if (!valid)return;
                let {code,data} = await this.$Http.setStoreFree(this.form);
                if(code){
                    this.$message.success(this.form.id?'修改成功!':'添加成功!');
                    this.handleClose();
                    this.GetList();
                }
            });
        },
        async setRow(type, row) {
            if (type == 1) {
                this.form = Object.assign({},row);
                this.dialogVisible = true;
            } else {
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该免单人吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.delStoreFree({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.GetList();
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },
        // 获取标签列表
        async GetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getStoreFree(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.paging.store_id = Number(this.$route.query.id|| this.storeList[0].id);
            this.GetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.vs-search-box{
    ::v-deep{
        .el-form{
            width: max-content;
        }
    }
}
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>